<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<%@ include file="/WEB-INF/jsp/common/jslibs.jsp"%>

<link rel="stylesheet" type="text/css" href="<c:url value="/resources/bxslider/jquery.bxslider.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/personal-mobile.css"/>" />

<style>
.banner-title{
	height: 100px;
	text-align: left;
	margin-left: 5%;
	margin-top: 20px;
	font-size: 50px;
}
.banner-text{
	height: 150px;	
}
.banner-text div{
	text-align: left;
	font-size: 20px;
	width: 30%;
	float: left;
	margin-left: 5%;
}
.banner-link{
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	margin-left: 5%;
	font-size: 18px;
	line-height: 50px;
	width: 170px;
	text-align: center;
	background: green;
	float: left;
}
.banner-link a{
	color: #fff;
	font-size: 18px;
}
</style>

<c:set var="numOfBanners" value="4" />
<c:set var="numOfTabs" value="2" />
<c:set var="numOfTilesPerTab" value="4" />

<div id="mainContent" align="center">

	<!--Begin Banner Slider -->
	<div id="banner-slider">
		<c:forEach items="${bannerList}" var="banner" varStatus="bannerStatus">
			<c:choose>
				<c:when test="${bannerStatus.count le numOfBanners}">
					<div class="slide" style="height: 350px">				
						<div class="banner-title"><c:out value="${banner.title}"/></div>
						<div class="banner-text"><div><c:out value="${banner.text}"/></div></div>
						<div class="banner-link"><a href="<c:out value="${banner.link}"/>" class="">Find Out More</a></div>					
						<img src="<c:url value="${banner.bgImageLink}"/>" alt="" style="width: 100%;height:100%;position: absolute;z-index: -1;left: 0;top: 0;" />
					</div>
				</c:when>
			</c:choose>
		</c:forEach>
	</div>
	
	
	<!--End Banner Slider -->
	
	<!--Begin Tab Section-->
	<div id="tab-section">
		<div id="section-nav">
			<ul id="tabs">
				<li class="active"><c:out value="${tabList[0].title}"/></li>
				<li><c:out value="${tabList[1].title}"/></li>
			</ul>
		</div>
		<div id="section-menu">
			<ul id="tab">
				<li class="active">
					<c:forEach items="${tabList[0].tabTiles}" var="firstTabTile" varStatus="tileStatus">
						<c:choose>
							<c:when test="${tileStatus.count le numOfTilesPerTab}">
								<div class="tab-section-tile">
									<div class="tab-inner">
										<input name="tile-link" value="${firstTabTile.link}" type="hidden"/>
										<div class="tab-icon-wrap">
											<img alt="" src="<c:url value="${firstTabTile.imageLink}"/>" class="tab-icon-wrap-img" />
										</div>
										<div class="tab-cell-content">
											<div><c:out value="${firstTabTile.title}"/></div>
											<span><c:out value="${firstTabTile.text}"/></span>
										</div>
									</div>
								</div>
							</c:when>
						</c:choose>
					</c:forEach>
				</li>
				<li>
					<c:forEach items="${tabList[1].tabTiles}" var="secondTabTile" varStatus="tileStatus">
						<c:choose>
							<c:when test="${tileStatus.count le numOfTilesPerTab}">
								<div class="tab-section-tile">
									<div class="tab-inner">
										<input name="tile-link" value="${secondTabTile.link}" type="hidden"/>
										<div class="tab-icon-wrap">
											<img alt="" src="<c:url value="${secondTabTile.imageLink}"/>" class="tab-icon-wrap-img" />
										</div>
										<div class="tab-cell-content">
											<div><c:out value="${secondTabTile.title}"/></div>
											<span><c:out value="${secondTabTile.text}"/></span>
										</div>
									</div>
								</div>
							</c:when>
						</c:choose>
					</c:forEach>					
				</li>			
			</ul>
		</div>
	</div>
	<!--End Tab Section-->
	
</div>		

<script type="text/javascript" src="<c:url value="/resources/bxslider/jquery.bxslider.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/personal-mobile.js"/>"></script>
